<template>
  <div class="selfCenter">
    <el-form :model="model" label-width="100px" :rules="rules">
      <el-form-item prop="userName" label="登录名:">
        <el-input v-model="model.userName" :maxlength="20" show-word-limit></el-input>
      </el-form-item>
      <el-form-item prop="realName" label="真实姓名:">
        <el-input v-model="model.realName" :maxlength="10" show-word-limit></el-input>
      </el-form-item>
      <el-form-item prop="mobileNum" label="手机号:">
        <el-input v-model="model.mobileNum" :maxlength="11" show-word-limit></el-input>
      </el-form-item>
      <el-form-item prop="email" label="邮箱:">
        <el-input v-model="model.email" :maxlength="30" show-word-limit></el-input>
      </el-form-item>
      <div class="form-footer" v-if="init">
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="changePassword">修改密码</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-form>
    <el-dialog
      title="修改密码"
      :visible.sync="showPasswordForm"
      destroy-on-close
      width="350px">
      <password-form
        @change-success="logout"></password-form>
    </el-dialog>
  </div>
</template>

<script>
import passwordForm from './resetPasswordForm'

export default {
  name: "selfCenter",
  components: { passwordForm },
  inject: ['logout', 'pattern'],
  data(){
    return{
      defaultModel:{
        userName: '',
        realName: '',
        mobileNum: '',
        email: '',
        password: '',
        status: '0',
      },
      model: {
        userName: '',
        realName: '',
        mobileNum: '',
        email: '',
        password: '',
        status: '0',
      },
      rules:{
        userName: [{required: true, message: "请输入登录名", trigger: "blur"}],
        realName: [{required: true, message: "请输入真实姓名", trigger: "blur"}],
        mobileNum: [
          {pattern: this.pattern.phone, message: "手机号码格式不正确", trigger: "blur"}
        ],
        email: [
          {pattern: this.pattern.email, message: "邮箱格式不正确", trigger: "blur"}
        ]
      },
      showPasswordForm: false,
      init: false,
    }
  },
  async created(){
    let userInfo = localStorage.getItem('user');
    if(!userInfo){
      this.$router.replace({
        name: 'Login'
      });
      return;
    }
    userInfo = JSON.parse(userInfo);
    await this.$yAxios({
      url: this.$api.system.queryById,
      data:{
        id: userInfo.id
      },
      loading: true,
    }, info => {
      Object.assign(this.defaultModel, info);
      this.init = true;
    })
    this.resetDefault();
  },
  methods:{
    reset(){
      Object.keys(this.model).map(key => {
        this.model[key] = '';
      });
    },
    resetDefault(){
      Object.keys(this.model).map(key => {
        this.model[key] = this.defaultModel[key];
      });
    },
    save(){
      this.$yAxios({
        url: this.$api.system.saveOrUpdateUser,
        data: Object.assign({}, this.defaultModel, this.model)
      }, info => {
        this.$message({
          type: 'success',
          message: '修改成功'
        });
        Object.assign(this.defaultModel, info);
        this.resetDefault();
      })
    },
    changePassword(){
      this.showPasswordForm = true
    }
  }
}
</script>

<style scoped lang="less">
.selfCenter{
  text-align: center;
  >.el-form{
    //border: @common-border;
    padding: 40px;
    display: inline-block;
    min-width: 600px;
    /deep/ .el-form-item__content{
      text-align: left;
    }
  }
  .form-footer{
    text-align: center;
    margin-top: 50px;
  }
}
</style>